<div class="innerLR">

    <!-- Widget -->
    <div class="widget widget-tabs border-bottom-none">

        <!-- Widget heading -->
        <div class="widget-head">
            <ul>
                <li class="active"><a class="glyphicons edit" href="#account-details" data-toggle="tab"><i></i>Account details</a></li>
                <li><a class="glyphicons settings" href="#account-settings" data-toggle="tab"><i></i>Account settings</a></li>
            </ul>
        </div>
        <!-- // Widget heading END -->

        <div class="widget-body">
            <form class="form-horizontal">
                <div class="tab-content">

                    <!-- Tab content -->
                    <div class="tab-pane active" id="account-details">

                        <!-- Row -->
                        <div class="row">

                            <!-- Column -->
                            <div class="col-md-6">

                                <!-- Group -->
                                <div class="form-group margin-none innerB">
                                    <label class="col-md-3 control-label">First name</label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <input type="text" id="firstname" class="form-control" />
                                            <span class="input-group-addon" data-toggle="tooltip" data-container="body" data-placement="top" data-original-title="First name is mandatory"><i class="fa fa-question-circle"></i></span>
                                        </div>
                                    </div>
                                </div>
                                <!-- // Group END -->

                                <!-- Group -->
                                <div class="form-group margin-none innerB">
                                    <label class="col-md-3 control-label">Last name</label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <input type="text" id="last_name" class="form-control" />
                                            <span class="input-group-addon" data-toggle="tooltip" data-container="body" data-placement="top" data-original-title="Last name is mandatory"><i class="fa fa-question-circle"></i></span>
                                        </div>
                                    </div>
                                </div>
                                <!-- // Group END -->

                                <!-- Group -->
                                <div class="form-group margin-none innerB">
                                    <label class="col-md-3 control-label">Date of birth</label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <input type="text" id="datepicker1" class="form-control" value="13/06/1988" />
                                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                        </div>
                                    </div>
                                </div>
                                <!-- // Group END -->

                            </div>
                            <!-- // Column END -->

                            <!-- Column -->
                            <div class="col-md-6">

                                <!-- Group -->
                                <div class="form-group margin-none innerB">
                                    <label class="col-md-3 control-label">Gender</label>
                                    <div class="col-md-9">
                                        <select class="form-control" id="gender">
                                            <option value="male">Male</option>
                                            <option value="female">Female</option>
                                        </select>
                                    </div>
                                </div>
                                <!-- // Group END -->

                                <!-- Group -->
                                <div class="form-group margin-none innerB">
                                    <label class="col-md-3 control-label">Age</label>
                                    <div class="col-md-9">
                                        <input type="text" id="age" class="form-control" />
                                    </div>
                                </div>
                                <!-- // Group END -->

                            </div>
                            <!-- // Column END -->

                        </div>
                        <!-- // Row END -->

                        <!-- Form actions -->
                        <div class="separator top">

                            <?php
                            if ($_SESSION['permission_id'] == "999999") {
                                echo '<button type="submit" class="btn btn-primary"><i class="fa fa-fw fa-check-square-o"></i> Create New User</button>';
                            } else {
                                echo '<button type="submit" class="btn btn-primary"><i class="fa fa-fw fa-check-square-o"></i> Save changes</button>';
                            }
                            ?>

                            <button type="button" class="btn btn-default" id="cancelButt"><i class="fa fa-fw fa-times"></i> Cancel</button>
                        </div>
                        <!-- // Form actions END -->

                    </div>
                    <!-- // Tab content END -->

                    <!-- Tab content -->
                    <div class="tab-pane" id="account-settings">

                        <!-- Row -->
                        <div class="row">

                            <!-- Column -->
                            <div class="col-md-3">
                                <strong>Change password</strong>
                            </div>
                            <!-- // Column END -->

                            <!-- Column -->
                            <div class="col-md-9">
                                <label for="inputUsername">Username</label>
                                <div class="input-group">
                                    <input type="text" id="inputUsername" class="form-control" disabled="disabled" />
                                    <span class="input-group-addon" data-toggle="tooltip" data-placement="top" data-container="body" data-original-title="Username can't be changed"><i class="fa fa-question-sign"></i></span>
                                </div>
                                <div class="separator bottom"></div>

                                <label for="inputPasswordOld">Old password</label>
                                <div class="input-group">
                                    <input type="password" id="inputPasswordOld" class="form-control" value="" placeholder="Leave empty for no change" />
                                    <span class="input-group-addon" data-toggle="tooltip" data-placement="top" data-container="body" data-original-title="Leave empty if you don't wish to change the password"><i class="fa fa-question-sign"></i></span>
                                </div>
                                <div class="separator bottom"></div>

                                <label for="inputPasswordNew">New password</label>
                                <input type="password" id="inputPasswordNew" class="form-control" value="" placeholder="Leave empty for no change" />
                                <div class="separator bottom"></div>

                                <label for="inputPasswordNew2">Repeat new password</label>
                                <input type="password" id="inputPasswordNew2" class="form-control" value="" placeholder="Leave empty for no change" />
                                <div class="separator bottom"></div>
                            </div>
                            <!-- // Column END -->

                        </div>
                        <!-- // Row END -->

                        <div class="separator line bottom"></div>


                        <!-- // Row END -->

                        <!-- Form actions -->
                        <div class="form-actions" style="margin: 0;">
                            <button type="submit" class="btn btn-primary"><i class="fa fa-fw fa-check-square-o"></i> Save changes</button>
                        </div>
                        <!-- // Form actions END -->

                    </div>
                    <!-- // Tab content END -->
                </div>
            </form>
        </div>
    </div>
    <!-- // Widget END -->
</div>	
<script type="text/javascript">

    $(document).ready(function() {
        $("#firstname").val("<?= $_GET['first_name'] ?>");
        $("#last_name").val("<?= $_GET['last_name'] ?>");
        $("#datepicker1").val("<?= $_GET['dob'] ?>");
        $("#gender").val("<?= $_GET['gender'] ?>");
        $("#age").val("<?= $_GET['age'] ?>");
        $("#inputUsername").val("<?= $_GET['username'] ?>");

        $("#cancelButt").click(function() {
            window.location.href = "index-mainpage.php";
        });
    });
</script>